<template>
	<div class="lb">
		<div class="swiper lb-swiper">
			<!-- 主体的滑动区 -->
		    <ul class="swiper-wrapper">
		        <li v-for="item in src" :key="item.id" class="swiper-slide" >
					<img :src="item.tp" />
				</li>
		    </ul>
		    <div class="swiper-pagination bl_pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
		</div>
	</div>
</template>

<script>
//1.引入vue周期函数
import { onMounted } from 'vue';
//2.引入Swiper的动态组件
import Swiper , {
	Autoplay,
	EffectCoverflow,
	EffectCube,
	Pagination,
} from 'swiper';
//3.swiper组件应用配置
Swiper.use([ Autoplay , EffectCoverflow , EffectCube , Pagination ]);

//
export default{
	name:'Lb',
	data(){
		return{
			src:[
				{ id:1 , tp:'lbimg/swiper1.jfif'},
				{ id:2 , tp:'lbimg/swiper2.jfif'},
				{ id:3 , tp:'lbimg/swiper3.jpeg'},
			]
		}
	},
	setup(){
		onMounted( ()=>{ 
			new Swiper( '.lb-swiper' , {
				//循环播放
				loop : true,
				//设置分页器效果
				pagination : {
					el : '.bl_pagination'
				},
				//设置播放项：时间，不停止，手指经过不暂停自动
				autoplay : {
					delay : 4000,
					stopOnLastSlide : false,
					disableOnInteraction : false,
				}
			} )
		} )
	}
}
</script>

<style>
/* 轮播区域的样式 */
.lb-swiper{
	width: 100%;
	height: 5.6rem;
}
.lb-swiper img{
	width: 100%;
	height: 100%;
}
/* 穿透 */
.bl_pagination :deep(.swiper-pagination-bullet-active){
	background-color: white;
}
</style>
